<template>
	<div class="content-box system-setting-wrappers">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
			<div class="el-form-sub-title">交易风控设置</div>
			<el-form-item label="异常订单风控" prop="abnormalOrderWatch">
				<el-radio-group v-model="form.abnormalOrderWatch" class="good-type">
					<el-radio :value="true"> 开启</el-radio>
					<el-radio :value="false"> 关闭</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="管理员手机号" v-if="form.abnormalOrderWatch" prop="informPhone">
				<el-input :maxlength="20" v-model="form.informPhone" placeholder="输入手机号" />
			</el-form-item>
			<div class="el-form-sub-title">集市价格管控</div>
			<el-form-item label="出售价格管控" prop="certificatePriceWatch">
				<el-radio-group v-model="form.certificatePriceWatch" class="good-type">
					<el-radio :value="true"> 开启</el-radio>
					<el-radio :value="false"> 关闭</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="酒藏出售价格建议">
				建议不低于购买价格
				<el-form-item label="" label-width="0" prop="lowPercent">
					<el-input-number v-model="form.lowPercent" :controls="false" style="width: 140px" class="ml5 mr5" :min="0"> </el-input-number></el-form-item
				>%，不高于
				<el-form-item label="" label-width="0" prop="highPercent">
					<el-input-number v-model="form.highPercent" :controls="false" style="width: 140px" class="ml5 mr5" :min="0">
					</el-input-number></el-form-item
				>%
			</el-form-item>
			<el-form-item label="酒藏逐年增值策略" prop="yearPercent">
				酒藏出售逐年增长建议比例
				<el-input-number v-model="form.yearPercent" :controls="false" style="width: 140px" class="ml5 mr5" :min="0"></el-input-number>%
			</el-form-item>
			<el-form-item label-width="0">
				<div class="flex-start w-full">
					<el-button type="primary" v-auth="'system:settings:update:invoke'" @click="onSubmit(0)">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="tsx" name="addGood">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, type FormRules } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { fetchSettingDetail, fetchUpdateSetting } from '/@/api/system';
import { fenToYuan } from '/@/utils/commonFunction';
import { min } from 'moment';
const route = useRoute();
const router = useRouter();
const formRef = ref();
const form = ref<any>({
	abnormalOrderWatch: true,
	certificatePriceWatch: true,
});

const validateLowPercent = (rule: any, value: any, callback: any) => {
	if (value) {
		if (value < 50) {
			callback(new Error('最低价格不能小于50%'));
		} else if (form.value.highPercent && value > form.value.highPercent) {
			callback(new Error('最低价格不能大于最高价格'));
		} else {
			callback();
		}
	} else {
		callback(new Error('最低价格不能为空'));
	}
};
const validateHighPercent = (rule: any, value: any, callback: any) => {
	if (value) {
		if (value < 100) {
			callback(new Error('最高价格不能小于100%'));
		} else if (form.value.lowPercent && value < form.value.lowPercent) {
			callback(new Error('最高价格不能小于最低价格'));
		} else {
			callback();
		}
	} else {
		callback(new Error('最低价格不能为空'));
	}
};
//校验规则
const rules = reactive<FormRules<any>>({
	informPhone: [
		{ required: true, message: '请输入手机号码', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' },
	],
	lowPercent: [
		{ required: true, message: '最低价格不能为空', trigger: ['change', 'blur'] },
		{
			validator: validateLowPercent,
			trigger: 'blur',
		},
	],
	highPercent: [
		{ required: true, message: '最高价格不能为空', trigger: ['change', 'blur'] },
		{
			validator: validateHighPercent,
			trigger: 'blur',
		},
	],
	yearPercent: [{ required: true, message: '比例不能为空', trigger: ['change', 'blur'] }],
});

const formatParams = (data: any) => {
	return {
		...data,
		lowPercent: fenToYuan(data.lowPercent),
		highPercent: fenToYuan(data.highPercent),
		yearPercent: fenToYuan(data.yearPercent),
	};
};

const onSubmit = async (status: any) => {
	formRef.value.validate(async (valid: boolean) => {
		if (valid) {
			const params = formatParams(form.value);
			params.status = status;
			const res = await fetchUpdateSetting(params);
			if (res.code == 200) {
				ElMessage.success('设置保存成功');
			} else {
				ElMessage.error(res.msg);
			}
		}
	});
};

onMounted(async () => {
	const res = await fetchSettingDetail();
	if (res.code === 200) {
		form.value = {
			...res.data,
			lowPercent: res.data.lowPercent * 100,
			highPercent: res.data.highPercent * 100,
			yearPercent: res.data.yearPercent * 100,
		};
	}
});
</script>

<style lang="scss">
.system-setting-wrappers {
	.el-form-item {
		.el-input,
		.el-input-number,
		.el-select,
		.refresh-select-wrapper {
			width: 100%;
			max-width: 450px;
		}
	}
}
</style>
